v-for="(p, index) in louPanConfig.list" :key="index"
<template>
  <el-dialog v-model="visible" title="楼盘选择">
    <div class="flex flex-row">
      <div
        v-for="(p, index) in louPanConfig.list"
        :key="index"
        :class="[
          'border',
          'border-[1px]',
          'border-[rgba(0,0,0,0)]',
          'w-1/4',
          'text-center',
          'whitespace-nowrap',
          ' bg-[var(--el-color-info-light-7)]',
          ' p-5px',
          'mx-5px',
          'cursor-pointer',
          { active: chooseList.includes(p.id) }
        ]"
        @click="insertCard(p)"
      >
        <span class="">{{ p.name }}</span>
      </div>
    </div>
    <div class="mt-30px flex flex-row justify-end">
      <el-pagination
        background
        layout="prev,pager,next,jumper,total"
        :total="louPanConfig.total"
        :page-count="initParams.pageNum"
        :page-size="initParams.pageSize"
        @size-change="sizeChange"
        @current-change="pageChange"
        @prev-click="pageChange"
        @next-click="pageChange"
      ></el-pagination>
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import { getLouPanList as getLouPanListApi } from "@/api/modules/loupan";
const visible = ref(false);

const chooseList = ref<number[]>([]);

const emits = defineEmits(["card"]);

const acceptParams = (row: any) => {
  chooseList.value = [];
  chooseList.value = JSON.parse(JSON.stringify(row));
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

const initParams = reactive({ pageSize: 500, pageNum: 1, name: "", isAudit: -1, status: -1, grounding: -1 });

watch(
  () => initParams,
  () => {
    getLouPanList();
  },
  { deep: true }
);

const louPanConfig = ref();

const getLouPanList = async () => {
  const { data } = await getLouPanListApi(initParams);
  const newData = data as any;
  louPanConfig.value = newData;
};

onBeforeMount(() => {
  Promise.all([getLouPanList()]);
});

const sizeChange = (val: number) => {
  initParams.pageSize = val;
};

const pageChange = (val: number) => {
  initParams.pageNum = val;
};

const insertCard = (p: any) => {
  const index = chooseList.value?.findIndex((e: number) => e === p.id) as number;
  if (index !== -1) {
    chooseList.value?.splice(index, 1);
  } else {
    chooseList.value?.push(p.id);
  }
  console.log(chooseList.value);
  // visible.value = false;
};

const confirm = () => {
  emits("card", chooseList.value);
  visible.value = false;
};

defineExpose({ acceptParams, close });
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid var(--el-color-primary);
}
</style>
